<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/common.css">
<link rel="stylesheet" href="stylesheets/balanceQuery.css">
</head>

<body>

	<div id="mainCharts" style="height: 300px;"></div>
	<p id="intro" class="intro">
		<span class="span-left">单位：/万元</span><span id="balanceTotal"
			class="span-right">合计：</span>
	</p>
	<ul id="balanceDetail" class="balanceDetail"></ul>

	<div id="modalDialog" style="display: none" class="modalDialog">
		<p class="dialogTitle" id="bname"></p>
		<div id="alertDetailPanel" class="alertDetailPanel">
			<ul>
				<li>所占比例：<span id="percent"></span></li>
				<li>计数单位：<span>万/元</span></li>
				<li>金额合计：<span id="momey"></span></li>
			</ul>
			<ul id="datalist">

			</ul>
		</div>
		<div class="dialogFooter">
			<div class="dialogOk" id="dialogOk"
				style="-webkit-tap-highlight-color: transparent;">确 认</div>
		</div>
	</div>
	<script type="text/javascript" src="javascripts/echarts.min.js"></script>
	<script>
var app;
var deviceone;
var nf;
var config;
var cache;
         
window.onDeviceOneLoaded = function() {	
	nf = sm("do_Notification");
	app = sm("do_App");
	var page = sm("do_Page");
    deviceone = require("deviceone");
    config = require("config");
    cache=sm("do_DataCache");
    var do_ALayout_root=ui("do_ALayout_root");
    var userinfo=cache.loadData("userinfo");
    var loadingUI = ui("loadingUI");  
    var chartdata=JSON.parse(do_ALayout_root.tag);    
	document.getElementById('balanceTotal').innerHTML="合计：￥"+parseFloat(chartdata.balanceTotal).toFixed(2);
	var balanceList=chartdata.balanceList;
       for(var i=0;i<balanceList.length;i++){
       	if(balanceList[i].value=='NaN' || balanceList[i].value==null){
       		balanceList[i].value=0;
		}					
       	balanceList[i].value=parseFloat(balanceList[i].value).toFixed(2);
       }
	option(balanceList);
    
    function option(balanceList){
        	var CanvasHeight = 360 + balanceList.length * 33;
            document.getElementById('mainCharts').style.height=CanvasHeight;
            var myChart = echarts.init(document.getElementById('mainCharts'));
            var option = {
                legend: {
                    orient: 'vertical',
                    top: 360,
                    width: '20%',
                    itemGap: 15,
                    padding: 10,
                    itemWidth: 18,
                    itemHeight: 18,
                    selectedMode: false,
                    textStyle: {
                        fontSize: 14
                    },
                    data: balanceList
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['35', '145'],
                        center: ['50%', '155'],
                        avoidLabelOverlap: true,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'inner',
                                    formatter: function (params) {                                          
                                    	balanceList.forEach(function(ele,i){
                                    		if(params.data.id==balanceList[i].id) 
                                    			balanceList[i].percent=(params.percent - 0).toFixed(0) + '%';
                            			});
                                    	return (params.percent - 0).toFixed(0) + '%'
                                    }
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: balanceList
                    }
                ],
                animation: false
            };
        		myChart.setOption(option);
        		loadingUI.visible = false;
        		
        		var liLIst='';
                for(var i=0;i<balanceList.length;i++){
                	liLIst+='<li data-id="'+balanceList[i].id+'" data-momey="'+balanceList[i].value+'" data-percent="'+balanceList[i].percent+'" data-bname="'+balanceList[i].name+'">'+balanceList[i].value+'</li>';
                }
                document.getElementById("balanceDetail").innerHTML=liLIst;
                myChart.on('click', alertDetail);
                var obj_lis = document.getElementById("balanceDetail").getElementsByTagName("li");
                for(i=0;i<obj_lis.length;i++){
                    obj_lis[i].onclick = alertDetail;
                }
                loadingUI.visible = false;   
        	};
        	function alertDetail(param) {
				var nowdate=new Date();
				var olddate=nowdate.getTime();
				app.fire("tologin",{times:olddate,pagesize:2});             	
               	loadingUI.visible = true;
				var _id;
				var _value;
				var _percent;
				var _bname;
				if(param.data){
				    _id=param.data.id;
				    _value=param.data.value;
				    _percent=(param.percent - 0).toFixed(0);
				    _bname=param.data.name;
				}else {
				    _id=this.getAttribute('data-id');
				    _value=this.getAttribute('data-momey');
				   _percent=this.getAttribute('data-percent');
				   _bname=this.getAttribute('data-bname');
				}
               var dataQuery={
                   id:_id
               };
           	var http1 = mm("do_Http");	
           	http1.method = "POST";
           	http1.timeout = 10 * 1000;
        	http1.contentType = "application/json";
        	http1.url = config.baseUrl + "getbalancedetail";
        	http1.body=JSON.stringify({balanceType:1,balanceId:dataQuery.id,usernum:userinfo.usernum,userId:userinfo.userid});
        	http1.on("success", function(detaildata) {
        		loadingUI.visible = false;
        		if(detaildata.result==1 && detaildata.data){		
        			if(detaildata.data.length>0){
        				var str="";
        				for(var i=0;i<detaildata.data.length;i++){
        					if(detaildata.data[i].balancemomeyele=='NaN' || detaildata.data[i].balancemomey==null){
        						detaildata.data[i].balancemomey=0;
        					}
        					detaildata.data[i].balancemomey=parseFloat(detaildata.data[i].balancemomey).toFixed(2);
        					 str+='<li><span class="li_left">'+detaildata.data[i].balancename+'</span><span class="li_right">'+detaildata.data[i].balancemomey+'</span></li>';
        				}
        				document.getElementById("datalist").innerHTML=str;
        			}
        					
        		}
        		else if(detaildata.result==3045){	
       			 app.closePage({data:"帐号可能被其它终端登录，请重新登录", animationType:"", layer:2});	
       			 cache.saveData("userinfo", "");
       			}		
        		else{
        			nf.toast(detaildata.msg || "失败"); 
        		}
        	});
        	http1.on("fail", function() {
        		loadingUI.visible = false;
        		nf.toast("网络异常");
        	});
        	http1.request();
            //alert(dataQuery.id);
        	 var bool = _percent.indexOf("%")
             if(bool<=0){
             	_percent = _percent +"%";
             	}
             document.getElementById('percent').innerHTML=_percent;
            document.getElementById('momey').innerHTML="￥"+_value;
            document.getElementById('bname').innerHTML=_bname;
            document.getElementById('modalDialog').style.display="block";
       		document.getElementById("dialogOk").addEventListener("click", dialogOk);
        };
        	
        	function dialogOk() {               	
				var nowdate=new Date();
				var olddate=nowdate.getTime();
				app.fire("tologin",{times:olddate,pagesize:2});
            	document.getElementById("datalist").innerHTML="";
            	document.getElementById('modalDialog').style.display="none";
            	document.getElementById("dialogOk").removeEventListener("click", dialogOk);
        	
       		 };
};
</script>
</body>

</html>
